<template>
  <div class="order-item">
    <div class="order-body">
      <div class="order-table">
        <el-table
          :data="orderlist"
          style="width: 100%; border: 1px solid #ebf8f8"
          height="460"
          :row-style="{ height: '72px' }"
          :header-cell-style="{ background: '#ebf8f8' }"
          align="center"
        >
          <el-table-column prop="orderid" label="订单id" width="200" fixed>
          </el-table-column>
          <el-table-column
            prop="usernumber"
            label="用户账号"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column label="订单金额" width="150" align="center">
            <template #default="scope">
              <span class="total-span">{{ scope.row.total }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="staus"
            label="订单状态"
            :filters="[
              { text: '已支付', value: '已支付' },
              { text: '已发货', value: '已收货' },
              { text: '已收货', value: '已收货' },
              { text: '退款中', value: '退款中' },
              { text: '已退款', value: '已退款' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            align="center"
            width="100"
          >
            <template #default="scope">
              <el-tag :type="classObje(scope.row.staus)" disable-transitions>{{
                scope.row?.staus
              }}</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="staus" label="订单状态"></el-table-column> -->
          <el-table-column
            prop="paytime"
            label="支付时间"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="订单类型"
            :filters="[
              { text: '汽车购买', value: '汽车购买' },
              { text: '会员购买', value: '会员购买' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            align="center"
            width="100"
          >
            <template #default="scope">
              <el-tag :type="getclass(scope.row.type)" disable-transitions>{{
                scope.row?.type
              }}</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="type" label="订单类型"></el-table-column> -->
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="200"
          >
            <template #default="scope">
              <el-row class="operate-btn">
                <el-col :span="12"
                  ><el-button
                    type="danger"
                    size="small"
                    @click="sendgood(scope.row)"
                    >确认发货</el-button
                  ></el-col
                >
                <el-col :span="12">
                  <el-button
                    type="primary"
                    size="small"
                    @click="backmoney(scope.row)"
                    >确认退款</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getorder, changeorder } from "network/request.js";
import { ElMessage } from "element-plus";
export default {
  inject: ["reload"],
  data() {
    return {
      orderlist: [],
      chooseorder: {
        orderid: "",
        goodid: "",
        paytime: "",
        userid: "",
        address: "",
        total: "",
        staus: "",
        type: "",
        usernumber: "",
        id: "",
      },
    };
  },
  computed: {
    classObje: function () {
      return (staus) => {
        if (staus == "已发货") {
          return "primary";
        } else if (staus == "已支付") {
          return "success";
        } else if (staus == "已退款") {
          return "info";
        } else if (staus == "退款中") {
          return "danger";
        }
        return "primary";
      };
    },
    getclass: function () {
      return (type) => {
        if (type == "汽车购买") {
          return "success";
        } else if (type == "会员购买") {
          return "danger";
        }
        return "primary";
      };
    },
  },
  methods: {
    backmoney(row) {
      this.chooseorder = JSON.parse(JSON.stringify(row));
      if (this.chooseorder.staus != "退款中") {
        return ElMessage.warning("该订单暂未发起退款~");
      }
      changeorder(this.chooseorder.id, "已退款").then(() => {
        ElMessage.success("成功退款~");
        this.reload();
      });
    },
    sendgood(row) {
      this.chooseorder = JSON.parse(JSON.stringify(row));
      if (this.chooseorder.staus != "已支付") {
        return ElMessage.warning("该订单已发货或处于退款中~");
      }
      if (this.chooseorder.type == "会员购买") {
        return ElMessage.warning("该订单为会员充值订单~");
      }
      changeorder(this.chooseorder.id, "已发货").then(() => {
        ElMessage.success("成功发货~");
        this.reload();
      });
    },
  },
  created() {
    getorder().then(({ data: res }) => {
      res.forEach((item) => {
        this.orderlist.push(item);
      });
      console.log(this.orderlist);
    });
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  vertical-align: top;
}
.order-item {
  // max-width: 1100px;
  // height: calc(100vh - 140px);
  height: 100%;
  width: 100%;
  margin: 0 auto;
  // margin-top: 20px;
  padding: 20px 0;
  // background-color: white;
}
.order-body {
  max-width: 1100px;
    margin: 0 auto;
    // margin-top: 20px;
    background-color: #fff;
    height: 100%;
    padding: 30px 30px;
}
.order-table {
  width: 90%;
  margin: 0 auto;
  padding: 0;
  height: 100%;
  background-color: #fff;
}
.operate-btn {
  padding: 0 10px;
  .el-button {
    padding: 0 10px;
  }
}
.el-tag {
  padding: 0 5px;
}
.total-span {
  color: orange;
  font-size: 16px;
  font-weight: 600;
}
</style>